import React, { useEffect, useState } from 'react';
import './dataServiceProject.scss'
import { Button, Form, Input, Select, Table, Col, message, Modal } from 'antd';
import { NavLink, useNavigate } from 'react-router-dom'
import { ExclamationCircleFilled } from '@ant-design/icons';
import { getServerPro,delServerPro,typeServerPro,nameServerPro } from '../../../../api/Service'
interface Props {}
function DataServiceProject(props: Props) {
    var navigate = useNavigate()
    const { confirm } = Modal;
    const [messageApi, contextHolder] = message.useMessage();
    var [loading, setLoading] = useState(false)
    const { Option } = Select;
    const { Search } = Input;
    const [data, setData] = useState([])
    const [type, setType] = useState('')
    var [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 100 })
    //初始化加载
    useEffect(() => {
        getlist()
        setPagination({
            ...pagination, total: data.length
        })
    }, [])

    // 获取服务项目列表
    var getlist = async () => {
        var res = await getServerPro()
        setData(setList(res.data.data))
        setLoading(false)
    }

    //合并数据函数
    var setList = (arr: any) => {
        var newarr = arr.map((item: any) => { return { ...item[0], ...item[1] } })
        return newarr
    }

    //点击搜索
    const onSearch = async (value: string) => {
        var res = await nameServerPro({ name:value })
        setData(setList(res.data.data))
        if (res.data.data.length) {
            message.success({ content: '查询成功' })
        } else {
            message.warning({ content: '暂无数据' })
        }
    };
    //表格列数据
    const columns: any = [
        { title: '项目编号', dataIndex: 'projectId', },
        { title: '项目名称', dataIndex: 'projectName', },
        { title: '次数', dataIndex: 'projectAccount', },
        {
            title: '项目类型', dataIndex: 'projecttypeId',
            render:(projecttypeId:any)=>{
                return projecttypeId==1?"付费项目":"免费项目"
            }
        },
        {
            title: '项目原价',
            dataIndex: 'projectPrice',
            render: (projectPrice: any) => {
                return <span style={{ color: "#FA746B" }}>{projectPrice}</span>
            }
        },
        { title: '项目介绍', dataIndex: 'projectIntroduce', },
        {
            title: '操作',
            render: (data: any) => {
                return (
                    <>
                        <NavLink to="/index/serveproject-edit" state={data}>编辑</NavLink>
                        <span onClick={() => { showConfirm(data.projectId) }}>删除</span>
                    </>
                )
            }
        },
    ];

    const showConfirm = (id: any) => {
        confirm({
            title: '删除确认',
            icon: <ExclamationCircleFilled />,
            content: '确定删除此项目信息吗?',
            okText: "确认",
            cancelText: "取消",
            async onOk() {
                var res = await delServerPro({ projectId:id })
                if (res.data.code == 200) {
                    messageApi.open({
                        type: 'success',
                        content: '删除成功',
                    });
                    getlist()
                }
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };

    // 分页发生改变后执行
    const handleChange = (pagi: any) => {
        setPagination(pagi) //更新页码
        setLoading(true)
        // 请求新的页码对应的数据
        getlist().then((res: any) => {
            setLoading(false)
            setPagination({
                ...pagi, total: res.data.length
            })
        })
    }

    // 下拉框发生变化
    const selectChange = async (value: any) => {
        var res = await typeServerPro({ projecttypeId:value })
        console.log(res.data.data);
        setData(setList(res.data.data))
        if (res.data.data.length) {
            message.success({ content: '查询成功' })
        } else {
            message.warning({ content: '暂无数据' })
        }
    }
    return (
        <div className='dataServiceProject'>
            <div className="title">
                <div className='leftborder'></div>
                <h3>服务项目管理</h3>
            </div>
            <div className="inputbox">
                <div className="left">
                    <div className="typebox">
                        <p className='typename'>项目类型:</p>
                        <Select
                            placeholder='请选择项目类型'
                            allowClear
                            onChange={(value) => { selectChange(value) }}
                        >
                            <Option value="1">付费项目</Option>
                            <Option value="2">免费项目</Option>
                        </Select>
                    </div>
                    <div className="searchbox">
                        <Search placeholder="请输入关键字" onSearch={onSearch} width={200} />
                    </div>
                </div>
                <Button type="primary" onClick={() => { navigate("/index/serveproject-add") }}>新增服务项目</Button>
            </div>

            <div className="table">
                <Table columns={columns} dataSource={data} pagination={pagination} onChange={(pagi) => { handleChange(pagi) }} loading={loading} />
            </div>
        </div>
    );
}

export default DataServiceProject;